Quedan unas horas para el nuevo año, un año que todos esperamos con ilusión y la esperanza que se cumplan esos deseos que quedaron en el camino durante este año que termina.
Os deseo que este nuevo año sea generoso con todos y que la felicidad, salud, amor, trabajo y PAZ estén presentes cada instante.
Suscribirse a entradas ATOM ocultar o cambiar por una imagen |
|
▼ |
Eliminar texto o enlaces que no vemos útiles en el blog es parte de la personalización. Quizás sea ese uno de los temas que más me gustan, la de personalizar o cambiar el aspecto del blog y que bueno tener la posibilidad de poder hacerlo.
Una de esas cosas que tenemos prisa por cambiar es el texto-enlace que nos ofrece la posibilidad de suscribirnos y está al final del blog algo así:Normalmente decimos ocultarlo y para ello nos limitamos a buscar en los estilos lo siguiente y añadiendo lo marcado en negrita:
.feed-links {
clear: both;
line-height: 2.5em;
visibility:hidden;
display:none;
display:none;
}
Con la llegada de las nuevas plantillas el proceso era el mismo sólo que se reflejaba de forma distinta con la misma solución.
.blog-feeds, .post-feeds {
margin: 1em 0;
text-align: center;
color: $(feed.text.color);
visibility:hidden;
display:none;
display:none;
}
En lugar de ocultar esa parte podemos darle un aspecto distinto y mostrar una imagen o texto recordando que pueden suscribirse a nuestras entradas.
Nos situamos en plantilla edición de HTML y marcamos para expandir la plantilla.
Buscamos lo siguiente:
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'> <data:f.name/> (<data:f.feedType/>) </a>
</b:loop>
</div>
</b:includable>
Sustituimos lo marcado en negrita por un texto cualquiera, una imagen o las dos cosas:
Suscribirse a las entradas <img src='url-imagen'/>
El resultado sería algo así:
No es nada del otro mundo pero se ve distinto como más personal ¿no?
Y seguimos decorando |
|
▼ |
Aunque ya estamos llegando casi al final de la Navidad y quien más quien menos tiene decorado su blog no puedo dejar pasar esta oportunidad de mostrar la idea de Blogger Plugins añadir unas campanitas en cada extremo del blog y un efecto muy sutil de nieve.
Las dos cosas las podemos añadir con un simple click si accedemos a su blog y marcamos sobre el widget que él mismo ha preparado gracias a jQuery.
Si lo preferimos también podemos añadirlo accediendo a nuestro blog y en plantilla de diseño editamos un nuevo gadget de HTML, en su interior añadiremos lo siguiente:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $("body").append($("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9X1tbvo8it1t_nWeIEnD0-imDhW_whdFOie4IAae5Ij9mGWOasrhb_mvFg_bMMZgTfVV03YgiPUQtaa1Xq15IsjCC_dAYld3FYRt7fkZ2sHWdE6NFOrhlyUzilDIX82DZ_ze6/s1600/christmas-bells-icon.png' style='position:absolute; top: 0px;left:0px;border:none;'/><img id='xmasleftbell' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijf5cAIuhUeIbTOtGRli7vNImQEkXoM2Oz-iYM7bw4S8KwDZlrFmTRuHwtjJvbMoOROyIkvwSRpP0wV6pviPodQAvTyuBynVP41l65VvFUhSBUUvz0wzrJQQg_pPU75lgcnoyt/s1600/christmas-bells-icon-right.png' style='position:absolute; top: 0px;right:0px;border:none;'/>")); </script> <script src='http://blogergadgets.googlecode.com/files/snowfall.min.jquery.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:199}); </script>
La url de las imágenes marcadas en negrita las podemos sustituir por cualquier otra.
El almacén de los regalos perdidos |
|
▼ |
Si Noel pasó y olvidó dejar algún regalo el siguiente vídeo les mostrará a los niños donde están esos juguetes que nunca llegaron..
Ideal para estos días que los peques están en casa
Feliz Navidad 2010 |
|
▼ |
Que esta Navidad sea el principio de un sin fin de buenos momentos.
¡¡Feliz Navidad!!
¡¡Feliz Navidad!!
Curiosidades en cristal |
|
▼ |
Fuentes navideñas |
|
▼ |
Wallpapers Navidad 2010 |
|
▼ |
Un Slide muy atractivo con jQuery |
|
▼ |
En Codrops cada actualización es un reto, uno se pierde entre tanta maravilla y cuesta decidirse por algo concreto, son efectos muy llamativos y en algunos casos pueden llegar a eclipsar el contenido. Si de lo que se trata es precisamente de eso, de atraer la vista a un sitio concreto o impresionar entonces seguro encontraremos lo ideal.
Y lo ideal en este caso es un slide, o mejor dicho un gran slide. Impresionante ¿verdad? pues está todo muy bien explicado pero aún así vamos a intentar simplificar las cosas.Para añadir este slide hay que tener en cuenta dos cosas, la primera es el tamaño y eso quiere decir que nuestro blog no debe tener en outer-wrapper menos de 902px de ancho (width) si mide más no hay problema.
El otro punto a tener en cuenta son las imágenes, el ejemplo contiene imágenes de Tucia son imágenes que visualmente parecen divididas en dos pero se puede añadir cualquier otra imagen siempre que tenga el mismo tamaño de las utilizadas.
Antes de comenzar es bueno saber que se utilizan cinco tamaños distintos de imágenes. En este archivo encontraremos las imágenes que se utilizaron y podemos tomar nota de los tamaños para crear nuestras propias imágenes.
El slide está compuesto de 5 áreas de distinto tamaño y cada área contiene 3 imágenes distintas y las 3 del mismo tamaño. A simple vista muestra 5 imágenes cuando en realidad llega a mostrar hasta 15.
Una vez tenemos nuestras imágenes preparadas nos situamos en plantilla edición de html y añadimos justo antes de </head> los estilos del slide
<style type='text/css'>
.hs_container{
position:relative;
width:902px;
height:471px;
overflow:hidden;
clear:both;
border:2px solid #fff;
cursor:pointer;
-moz-box-shadow:1px 1px 3px #222;
-webkit-box-shadow:1px 1px 3px #222;
box-shadow:1px 1px 3px #222;
}
.hs_container .hs_area{
position:absolute;
overflow:hidden;
}
.hs_area img{
position:absolute;
top:0px;
left:0px;
display:none;
}
.hs_area img.hs_visible{
display:block;
z-index:9999;
}
.hs_area1{
border-right:2px solid #fff;
}
.hs_area4, .hs_area5{
border-top:2px solid #fff;
}
.hs_area4{
border-right:2px solid #fff;
}
.hs_area3{
border-top:2px solid #fff;
}
.hs_area1{
width:449px;
height:334px;
top:0px;
left:0px;
}
.hs_area2{
width:451px;
height:165px;
top:0px;
left:451px;
}
.hs_area3{
width:451px;
height:167px;
top:165px;
left:451px;
}
.hs_area4{
width:192px;
height:135px;
top:334px;
left:0px;
}
.hs_area5{
width:708px;
height:135px;
top:334px;
left:194px;
}
</style>
A continuación pegamos jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
Si ya estamos utilizando jQuery omitimos ese paso y añadimos jquery.easing.1.3.js lo descargamos y subimos a nuestro servidor para añadirlo a continuación de este modo:
<script src='url-de-tu-archivo-jquery.easing.1.3.js' type='text/javascript'/>
O si lo preferimos copiamos el contenido del script y lo añadimos de esta forma:
<script type='text/javascript'>
//<![CDATA[
Aquí añadimos el contenido de jquery.easing.1.3.js
//]]>
</script>
Para terminar con los scripts copiamos el contenido de este otro archivo y lo pegamos a continuación del anterior tal y como se presenta.
Por último lo más entretenido añadir las imágenes.
Para saber donde incluir cada imagen nos fijaremos que las áreas van numeradas del 1 al 5 y las imágenes indican la posición y el área a la que pertenecen. Este sería un ejemplo de area1.
<div class="hs_area hs_area1">
<img class="hs_visible" src="Url-imagen/area1/1.jpg" alt=""/>
<img src="Url-imagen/area1/2.jpg" alt=""/>
<img src="Url-imagen/area1/3.jpg" alt=""/>
</div>
Comenzamos con las imágenes, en un gadget de HTML añadimos lo siguiente:
<div id="hs_container" class="hs_container">
<div class="hs_area hs_area1">
<img class="hs_visible" src="Url-imagen/area1/1.jpg" alt=""/>
<img src="Url-imagen/area1/2.jpg" alt=""/>
<img src="Url-imagen/area1/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area2">
<img class="hs_visible" src="Url-imagen/area2/1.jpg" alt=""/>
<img src="Url-imagen/area2/2.jpg" alt=""/>
<img src="Url-imagen/area2/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area3">
<img class="hs_visible" src="Url-imagen/area3/1.jpg" alt=""/>
<img src="Url-imagen/area3/2.jpg" alt=""/>
<img src="Url-imagen/area3/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area4">
<img sclass="hs_visible" src="Url-imagen/area4/1.jpg" alt=""/>
<img src="Url-imagen/area4/2.jpg" alt=""/>
<img src="Url-imagen/area4/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area5">
<img class="hs_visible" src="Url-imagen/area5/1.jpg" alt=""/>
<img src="Url-imagen/area5/2.jpg" alt=""/>
<img src="Url-imagen/area5/3.jpg" alt=""/>
</div>
</div>
En un principio parece complicado pero de tantos slider que he probado es uno de los más sencillos, y como siempre podemos ver el resultado de todo lo anterior.
Christmas - iconos navideños |
|
▼ |
Más fuentes para descargar |
|
▼ |
Jose a secas sabe que me gustan las fuentes y en parte es una afición que me viene de él y que descubrí cuando hice mis primeros intentos con Gimp. No tenemos lo que se dice una comunicación frecuente pero cada vez que descubrimos una nueva fuente inmediatamente nos ponemos en contacto y nos la mandamos no sin antes presumir un poco por haberla descubierto
Esta vez fue su turno y me ha mandado este estupendo enlace de Francesco Mugnai donde podemos ver y descargar algunas estupendas fuentes. ¡Gracias!
Top de comentaristas en forma de nube |
|
▼ |
Si antes teníamos una nube de etiquetas ahora la podemos tener con el top de comentarios. La idea es de Blogger Sentral y según indica el recuento de comentarios se extrae de los últimos 2.000 comentarios procesados a través de un pipe. ¿Quieres saber qué es un pipe?
Para incluir la nube en nuestro blog ir a plantilla de Diseño y añadir un gadget de HTML/Javascript, en su interior incluimos lo siguiente
<!-- Top Commentators Cloud Start
(c) 2010 Blogger Sentral. Original code by http://bloggersentral.blogspot.com/. Do not remove this credit and the Make your own link at the bottom of the code.-->
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='text-decoration:none;font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + " </a>";//clickable commentator name
display = display + ccLName;
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://gemablog-.blogspot.com
&Exclusions=Anonymous,Gem@
&ShowHowMany=20
&Order=alphabet
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
<!-- Top Commentators Cloud End --></div>
Los cambios:- YourBlogUrl es el lugar para añadir la url de nuestro blog, sustituimos la que hay añadida por la vuestra..
- Exclusions añadimos los nombres de comentaristas que deseamos sean excluidos de la nube incluido el nuestro, lo haremos añadiendo el nombre separado de una coma.
- ShowHowMany es el número de comentaristas que se visualizará en la nube.
- Order para la frecuencia (con el más frecuente en la parte superior), si lo deseamos añadimos frequency
- Comment count es el número que contabiliza los comentarios, si no deseamos mostrarlo eliminamos la línea
El nombre de cada comentarista es un enlace a la página de su perfil y adquiere el color que tenemos definido para los enlaces.
El autor da la posibilidad de modificar el pipe conforme a las preferencias de cada uno para eso lo pone a disposición de todos
Esto es una captura del ejemplo que puede verse en el siguiente blog.
Iconos navideños |
|
▼ |
Silent Night 10 Christmas
REFERENCIA: ArtDesigner.lv
Tutorial de Adobe Photoshop para crear el árbol de Navidad.
Tipografías gratuitas |
|
▼ |
Iconos RSS -Twitter- Facebook |
|
▼ |
Mullidos, esponjosos, confortables, familiares...
Algunos les llamamos cojines, otros almohadones y casi todos tenemos en casa uno favorito.
RSS, Facebook y Twitter tres iconos que podemos obtener simplemente guardando la imagen en nuestro PC.
También podemos usarlos en casa y adquirirlos en Craftsquatch
Mejorar fotografías online |
|
▼ |
Improve Your Images es una herramienta de las que a mi me gustan es decir online, para no tener que descargar e instalar nada. En un minuto o menos podemos mejorar el contraste y color de las fotografías, lo único que hay que hacer es subir la imagen y una vez nos da el resultado guardarla en nuestro PC. Prueba y me dices si estoy exagerando.
Añadir fuentes de Google Font API al blog |
|
▼ |
Son muchos los que cuando ven una entrada con fuentes para descargar lo primero que preguntan es la forma de añadirlas al blog, no es posible hacerlo ya que son fuentes para utilizar con algún editor sin embargo hace unos meses llegaron las fuentes de Google Font API una de las sorpresas menos esperadas y más gratificantes por parte de Google y que podemos ver en el directorio de Google Font .
JMiur nos explicaba de forma detallada los pasos a seguir para aplicar las fuentes a nuestro blog y nos descubría la posibilidad de previsualizar las fuentes de forma dinámica antes de tomar la decisión de añadirlas con Google Operating System.
Siguen llegando dudas sobre la forma de añadirlas al blog, la respuesta es que las añadimos con la propiedad font-family donde deseamos mostrarlas y ahí es dónde empieza el juego.
Nos situamos en plantilla justo antes de <b:skin>: y añadimos lo siguiente:
<link href=' http://fonts.googleapis.com/css?family=NOMBRE-DE-LA-FUENTE' rel='stylesheet' type='text/css'/>
Donde NOMBRE-DE-LA-FUENTE lo sustituimos por el nombre de fuente que escogimos en el directorio para el ejemplo escogí Tangerine así que añadimos el nombre en el código anterior y podemos guardar los cambios.
<link href=' http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'/>
Si nuestra fuente tiene espacios en el nombre sustituimos esos espacios con el signo + y si deseamos añadir más de una fuente las separamos con |
<link href=' http://fonts.googleapis.com/css?family=Tangerine|Droid+Sans' rel='stylesheet' type='text/css'/>
Ahora utilizaremos la propiedad font-family pero debemos saber dónde se encuentra esa fuente que deseamos cambiar. Seguimos con ejemplos siempre sobre una plantilla Minima.
Para el título del blog:
#header h1 {font-family: 'Tangerine', century gothic, verdana;
......
}
Títulos de las entradas:
.post h3 {font-family: 'Tangerine', century gothic, verdana;
......
}
Títulos de la sidebar:
.sidebar h2 {font-family: 'Tangerine', century gothic, verdana;
......
}
Si tenemos columnas en el footer:
#col1 h2{font-family: 'Tangerine', century gothic, verdana;
......
}
#col2 h2{
font-family: 'Tangerine', century gothic, verdana;
......
}
#col3 h2{
font-family: 'Tangerine', century gothic, verdana;
......
}
Desde ayer el diseñador de plantillas dispone de 40 nuevas fuentes así lo publica Blogger in draft y Oloman nos lo cuenta con todo detalle.
Extraer colores de una imagen |
|
▼ |
Imgr es una herramienta de color que permite a los usuarios cargar una imagen y extraer una muestra en formato hexadecimal de los colores que la componen y posteriormente descargarla
Se dice y se comenta... |
|
▼ |
Sentir curiosidad por saber cómo piensa o qué afición tiene esa persona que hay detrás del blog que frecuentamos es algo lógico, ponemos imagen a un nombre y en algunos casos esa imaginación va más allá y nos formamos una idea a veces equivocada y otras no tanto.
Con las entrevistas llegamos a conocer más detalles de la persona, y tan curioso es conocer al entrevistado como al entrevistador. Son personas que me dedicaron unos minutos en su blog y para ellas mi agradecimiento algo que debería haber dicho hace tiempo.
Con las entrevistas llegamos a conocer más detalles de la persona, y tan curioso es conocer al entrevistado como al entrevistador. Son personas que me dedicaron unos minutos en su blog y para ellas mi agradecimiento algo que debería haber dicho hace tiempo.
Aunque ya pasó un mes algunos tenemos todavía muy presente los premios 20Blogs, y con motivo de esos premios hace unas semanas Un universitario cualquiera me realizó una entrevista que podemos ver en su blog.
¡ Gracias Manu !
Un gran lujo compartir charla con Carlos Santias de BLOGTECNIA.
Gracias Carlos por esta entrevista y algunas charlas que me descubrieron ese lado humano de la persona que nos habla de portables, widgets y aplicaciones interesantes.
Siempre digo que catalogar un blog como de ayuda es muy discutible por eso me gustó cuando Quiero crear un BLOG dijo que éste es un blog de consulta.Gracias por la entrevista.
Menú efecto deslizante con jQuery |
|
▼ |
En Andrew Valums´blog he visto un efecto creado con jQuery. El resultado es un menú vertical de imágenes con efecto deslizante. Una discreta información de carga se muestra en la parte superior así como la posibilidad de mostrar un tooltip con transparencia sobre la imagen.
El resultado de todo eso nos lo muestra el autor en el siguiente ejemplo.Lo que hice fue modificar un poco el ancho, pensando que una sidebar suele medir aproximadamente 220px y lo adapté para unas imágenes de 215 x 100
En plantilla edición de HTML añadimos justo antes de ]]></b:skin>
<style type='text/css'>
div.sc_menu_wrapper {
position: relative;
height: 400px; /* height es la altura debe ser mayor que la altura de una imagen para formar el scrollbar. */
width: 220px; /* width es la anchura que no debe ser superior a la sidebar */
margin-top: 30px;
overflow: auto;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 215px;
border: 2px rgb(79, 79, 79) solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
/* color y fondo efecto hover */
color: #fff;
background: rgb(79, 79, 79);
}
.sc_menu a:hover {
border-color: rgb(130, 130, 130);
border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading { /* estilos de carga */
position: absolute;
top: 50px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
.sc_menu_tooltip { /* estilos tooltip */
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid rgb(79, 79, 79);
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
}
</style>
En los estilos he añadido lo que podemos cambiar.Los colores deben ser en rgb.
Sustituimos "Url-enlace" por la url de nuestro enlace y "Url-imagen" por la de nuestras imágenes.
Ahora justo antes de </head> añadimos:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>;
Si ya estamos usando jQuery en la plantilla omitimos el paso anterior.
Copiamos el contenido de este archivo de texto y lo pegamos antes de antes de </head>
Y por último nos queda el HTML, editamos un gadget de HTML y en su interior añadimos:
<div class="sc_menu_wrapper">
<div class="sc_menu">
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
</div></div>
Completamos el código anterior añadiendo en title="Título" el texto que se mostrará en el tooltip.
En Url-imagen añadimos la url de cada imagen.
Con Url-enlace lo sustituimos por la url del enlace que vamos a añadir.
Iconos Portfolio - Cupcake |
|
▼ |
Cupcake
6 iconos .icns y .png
Tamaño: 16x16- 32x32 - 64x64 - 128x128 - 256x256 - 512x512
Portfolio
12 Iconos PNG y PSD - Tamaño: 256×256px
REFERENCIA: ArtDesigner.lv
wallpapers.com |
|
▼ |